<template>
  <div class="container">
    <div class="panel">
      <ul class="tabs">
        <li
          v-for="(item, index) in tabsData"
          :key="index"
          @click="clickTabs(item)"
        >
          <span
            :class="{
              active: tabsDataActive === index,
              disabled: item.use === false,
            }"
            :title="item.name"
            >{{ item.name }}</span
          >
        </li>
      </ul>
      <Industrial ref="industrial" @changeCode="changeCode" />
    </div>
    <div v-if="targetCode !== ''" class="panel2">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">企业列表</el-menu-item>
      </el-menu>
      <CompanyList
        ref="companyList"
        v-if="activeIndex === '1'"
        :targetCode="targetCode"
      />
    </div>
  </div>
</template>

<script>
import Industrial from "./structure/Industrial";
// import Industrial from "./child/Industrial1";
import CompanyList from "./child/CompanyList";
export default {
  components: {
    Industrial,
    CompanyList,
  },
  data() {
    return {
      tabsData: [],
      tabsDataActive: 0,
      tabsDataActiveItem: {},
      targetCode: "",
      activeIndex: "1",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.tabsData = [];
      this.$get(this.$Url.industrial.RootNodeList).then((res) => {
        const data = res.data;
        if (data && data.length > 0) {
          data.map((item) => {
            if (this.tabsData.find((val) => val.code === item.code)) return;
            this.tabsData.push(item);
          });
          this.tabsDataActiveItem = this.tabsData[0];
          this.$refs.industrial.getAllData(this.tabsDataActiveItem.code);
        }
      });
    },
    clickTabs(item) {
      this.tabsData.map((val, index) => {
        if (val.code === item.code) {
          this.tabsDataActive = index;
          this.tabsDataActiveItem = item;
          this.$refs.industrial.getAllData(this.tabsDataActiveItem.code);
        }
      });
    },
    changeCode(code) {
      this.targetCode = code;
      if (this.activeIndex === "1" && this.$refs.companyList) {
        this.$refs.companyList.pageNum = 1;
        this.$refs.companyList.total = 0;
        this.$refs.companyList.sort = 1;
        this.$refs.companyList.sortField = "pingfen";
        if (code) {
          this.$refs.companyList.getCompanyInfo(this.targetCode);
        }
      }
    },
    handleSelect(item) {
      this.activeIndex = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .panel {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    overflow-x: auto;
    .tabs {
      position: relative;
      padding: 20px 20px 0;
      list-style: none;
      width: 170px;
      height: 100%;
      li {
        width: 130px;
        height: 32px;
        min-width: 0;
        margin-bottom: 16px;
        span {
          display: inline-block;
          width: 100%;
          height: 100%;
          line-height: 32px;
          border: 1px solid #524cab;
          border-radius: 16px;
          box-sizing: content-box;
          text-align: center;
          font-size: 13px;
          color: #524cab;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.active {
            color: #fff;
            background-color: #524cab;
          }
          &.disabled {
            color: #fff;
            background-color: #eee;
            border-color: #eee;
          }
        }
      }
    }
  }
  .panel2 {
    padding: 0 .2rem 10px;
    background-color: #fff;
  }
}
</style>